<!-- 
  transition 组件，实现过渡或动画

    应用场景：项目中有一些元素或组件需要通过状态来控制显示隐藏。默认情况下显示隐藏都会非常突兀。如果能够有一些过渡或动画的效果就好了。

  被 transition 组件包裹的元素在进入/离开的时候主动添加一些类名：
    一、进入阶段
      1. v-enter            定义进入初始化阶段的样式，该类会在元素插入页面之前添加，插入之后下一帧就被移除
      2. v-enter-active     定义进入时整个过程中的样式，在这儿可以去写过渡时长、时间曲线、
      3. v-enter-to         定义进入完成时的样式，该类会在v-enter移除的时候添加
    二、离开阶段
      4. v-leave            定义离开初始化阶段的样式，该类会在元素离开页面之前添加，下一帧就被移除
      5. v-leave-active     定义整个离开阶段的样式，在这儿可以去写过渡时长、时间曲线、
      6. v-leave-to         定义离开完成时的样式，该类会在 v-leave 移除的时候添加

  一个组件上可能有多个元素需要同时做不同的过渡或动画
      需要给 Transition 组件，设置 name 属性，name 属性的值，会作为 6个类名的前缀：比如：
        <Transition name="abcd">
          abcd-enter
          abcd-enter-active
          abcd-enter-to
          abcd-leave
          abcd-leave-active
          abcd-leave-to
  
  可以添加 appear 属性，让元素默认触发过渡或动画的效果一次

  Transition 组件，还有如下的6个属性，去修改类名
          enter-class             
          enter-active-class      
          enter-to-class

          leave-class
          leave-active-class
          leave-to-class

  结合 animate.css 库来实现动画效果
          官网地址：https://animate.style/

  过渡模式：
    一个 Transition 包裹住两个元素时，这两个元素是互斥

    通过设置 mode 属性来控制过渡模式
    mode="out-in"   先执行离开，再执行进入
    mode="in-out"   先执行进入，再执行离开


 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="isShowBox = !isShowBox">Toggle</button>

    <div style="display: flex">
      <Transition name="fade" appear>
        <div v-if="isShowBox" class="box"></div>
      </Transition>
      <Transition name="h" appear enter-class="abcd" enter-active-class="hello">
        <div v-if="isShowBox" class="box"></div>
      </Transition>
    </div>

    <hr />
    <button @click="isShowTwo = !isShowTwo">Toggle</button>
    <Transition enter-active-class="scale" leave-active-class="scale2">
      <div v-if="isShowTwo" class="box"></div>
    </Transition>

    <hr />
    <button @click="isShowThree = !isShowThree">Toggle</button>
    <Transition
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutLeft"
    >
      <div v-if="isShowThree" class="box"></div>
    </Transition>

    <hr />
    <button @click="isShowA = !isShowA">Toggle</button>
    <Transition name="fade2" mode="out-in">
      <div v-if="isShowA" key="aaa" class="box-a">A</div>
      <div v-else key="bbb" class="box-b">B</div>
    </Transition>

    <div style="height: 2000px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowBox: true,
      isShowTwo: false,
      isShowThree: false,
      isShowA: true,
    };
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 5s linear;
}

.abcd,
.h-enter,
.h-leave-to {
  /* opacity: 0; */
  height: 0;
}

.h-enter-active,
.h-leave-active {
  /* transition: opacity 5s linear; */

  transition: all 5s linear;
}

.hello {
  transition: all 2s ease-in;
}

@keyframes xxx {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes yyy {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0);
  }
}
.scale {
  animation: xxx 2s linear;
}
.scale2 {
  animation: yyy 2s linear;
}

.box-a,
.box-b {
  width: 100px;
  height: 100px;
}

.box-a {
  background-color: red;
}
.box-b {
  background-color: green;
}

.fade2-enter,
.fade2-leave-to {
  opacity: 0;
}
.fade2-enter-active,
.fade2-leave-active {
  transition: all 3s linear;
}
</style>
